<template>
  <div style="margin: 10px auto">
    <vxe-grid
      border
      resizable
      height="300"
      row-id="id"
      :columns="tableColumn"
      :toolbar-config="{ slots: { buttons: 'toolbar_buttons' } }"
      :data="tableData"
    >
      <template v-slot:toolbar_buttons>
        <el-button @click="handleClick">切换数据</el-button>
        <el-button @click="handleClick2">切换数据</el-button>
      </template>
    </vxe-grid>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 10001,
          name: "Test1",
          bankCard: "6222525678789432",
          sex: "0",
          time: 1599320111520,
          date: "2020-11-14T07:14:41.000Z",
          amount: 998.3,
          num: 863.345,
          num7: 863.345,
          num8: 863.345,
          num9: 863.345,
        },
        {
          id: 10002,
          name: "Test2",
          bankCard: "6222525675674564",
          sex: "1",
          time: 1590820967410,
          date: "2022-10-24T08:14:18.000Z",
          amount: 777776536.3,
          num: 854.7789,
          num7: 854.7789,
          num8: 854.7789,
          num9: 854.7789,
        },
        {
          id: 10003,
          name: "Test3",
          bankCard: "6222525477686963",
          sex: "0",
          time: 1599390785410,
          date: "2020-09-04T06:08:25.000Z",
          amount: 253.486,
          num: 963.1456,
          num7: 963.1456,
          num8: 963.1456,
          num9: 963.1456,
        },
      ],
      tableColumn: [
        { type: "checkbox", width: 50 },
        { type: "seq", width: 50 },
        { field: "name", title: "姓名" },
        { field: "date", title: "日期", showHeaderOverflow: true },
        { field: "time", title: "时间戳", showOverflow: true },
      ],
    };
  },
  methods: {
    handleClick() {
      console.log("调用转换方法");
      this.tableData = [
        {
          id: 10001,
          name: "TestNew",
          bankCard: "6222525678789432",
          sex: "0",
          time: 1599320111520,
          date: "2020-11-14T07:14:41.000Z",
          amount: 998.3,
          num: 863.345,
          num7: 863.345,
          num8: 863.345,
          num9: 863.345,
        },
        {
          id: 10002,
          name: "TestNew2",
          bankCard: "6222525675674564",
          sex: "1",
          time: 1590820967410,
          date: "2022-10-24T08:14:18.000Z",
          amount: 777776536.3,
          num: 854.7789,
          num7: 854.7789,
          num8: 854.7789,
          num9: 854.7789,
        },
        {
          id: 10003,
          name: "TestNew3",
          bankCard: "6222525477686963",
          sex: "0",
          time: 1599390785410,
          date: "2020-09-04T06:08:25.000Z",
          amount: 253.486,
          num: 963.1456,
          num7: 963.1456,
          num8: 963.1456,
          num9: 963.1456,
        },
      ];
    },
    handleClick2() {
      console.log("切换回数据");
      this.tableData = [
        {
          id: 10001,
          name: "Test1",
          bankCard: "6222525678789432",
          sex: "0",
          time: 1599320111520,
          date: "2020-11-14T07:14:41.000Z",
          amount: 998.3,
          num: 863.345,
          num7: 863.345,
          num8: 863.345,
          num9: 863.345,
        },
        {
          id: 10002,
          name: "Test2",
          bankCard: "6222525675674564",
          sex: "1",
          time: 1590820967410,
          date: "2022-10-24T08:14:18.000Z",
          amount: 777776536.3,
          num: 854.7789,
          num7: 854.7789,
          num8: 854.7789,
          num9: 854.7789,
        },
        {
          id: 10003,
          name: "Test3",
          bankCard: "6222525477686963",
          sex: "0",
          time: 1599390785410,
          date: "2020-09-04T06:08:25.000Z",
          amount: 253.486,
          num: 963.1456,
          num7: 963.1456,
          num8: 963.1456,
          num9: 963.1456,
        },
      ];
    },
  },
};
</script>
